<template>
  <div class="historypage tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 :</span>&nbsp;
      <div class="layoutBox" style="width:242px">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 :</span>&nbsp;
      <div class="layoutBox" style="width:160px">
        <el-select v-model="value" multiple collapse-tags placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
&emsp;&emsp;
      <el-button @click="search">
        <i class="iconfont icon-sousuo"></i>查询
      </el-button>
      <el-button @click="exportExcel()" type="delet">
        <i class="iconfont icon-daochu"></i>导出
      </el-button>
    </div>
    <div class="currency-mode-wrap">
      <yf-tabs type="border-card" :value="tabActive" @tab-click="toggleTab">
        <yf-tab-pane name="a1" label="数据列表">
          <div ref="tableWra" class="tablebox" style="height: calc(100% - 35px);">
            <el-table :data="tableData" border height="100%" style="width: 100%" ref="table" v-loading="loading"
           element-loading-text="加载中"
           element-loading-spinner="loading-type-a"
           element-loading-background="rgba(255, 255, 255, 1)">
              <el-table-column type="index" label="序号" :index="indexMethod" width="50" fixed></el-table-column>
              <el-table-column prop="cityName" width="120" fixed label="城市"></el-table-column>
              <el-table-column prop="areaName" width="140" fixed label="区县"></el-table-column>
              <el-table-column min-width="121" prop="stationName" :label="tableStationLabel"></el-table-column>
              <el-table-column prop="name" width="131" label="监测时间">
                <el-table-column min-width="181" prop="dataTime" label="Ⅲ类标准限值"></el-table-column>
              </el-table-column>
              <el-table-column
                prop="name"
                :label="item.label"
                v-if="item.isShow"
                v-for="(item,key) in tableHead"
                :key="key"
              >
                <el-table-column :prop="item.value" min-width="110" :label="item.standard"></el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small="true"
              popper-class="select-common-option"
              :page-sizes="pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords"
            >
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </yf-tab-pane>
        <!-- <yf-tab-pane name="a2" label="数据图表">
          <div class="chart-wrap" style="height: 100%">
            <div id="trend-analysis" style="height: 100%"></div>
          </div>
        </yf-tab-pane> -->
      </yf-tabs>
    </div>
  </div>
</template>

<script>
  import {exportTableData} from '../../assets/js/tableExport'
  export default {
    name: "",
    data() {
      return {
        stationName:'',
        loading:true,
        tableStationLabel: "",
        dateRange: "",
        stationId: "",
        value: [],
        valueA: [
          "w01010",
          "w01001",
          "w01009",
          "w01014",
          "w01003",
          "w01019",
          "w21003",
          "w21011",
          "w21001",
          "w01016"
        ],
        valueB: ["w01001", "w01018", "w21003", "w21011", "w21001"],
        optionData: [],
        optionDataA: [
          { value: "w01010", label: "水温", standard: "", isShow: true },
          { value: "w01001", label: "pH", standard: "6~9", isShow: true },
          { value: "w01009", label: "溶解氧", standard: "≥5", isShow: true },
          { value: "w01014", label: "电导率", standard: "", isShow: true },
          { value: "w01003", label: "浊度", standard: "", isShow: true },
          { value: "w01019", label: "高锰酸盐", standard: "6", isShow: true },
          { value: "w21003", label: "氨氮", standard: "1", isShow: true },
          { value: "w21011", label: "总磷", standard: "0.2", isShow: true },
          { value: "w21001", label: "总氮", standard: "", isShow: true },
          { value: "w01016", label: "叶绿素", standard: "", isShow: true }
        ],
        optionDataB: [
          //{ value: 'w01010', label: "水温", standard: "", isShow: true },
          { value: "w01001", label: "pH", standard: "6~9", isShow: true },
          //{ value: 'w01009', label: "溶解氧", standard: "≥5", isShow: true },
          //{ value: 'w01014', label: "电导率", standard: "", isShow: true },
          //{ value: 'w01003', label: "浊度", standard: "", isShow: true },
          { value: "w01018", label: "CODcr", standard: "6", isShow: true },
          { value: "w21003", label: "氨氮", standard: "1", isShow: true },
          { value: "w21011", label: "总磷", standard: "0.2", isShow: true },
          { value: "w21001", label: "总氮", standard: "", isShow: true }
        ],
        selectCheck: [], //选中的监测项目
        tableData: [],
        tableHead: [],
        tableHeadA: [
          { value: "w01010", label: "水温", standard: "", isShow: true },
          { value: "w01001", label: "pH", standard: "6~9", isShow: true },
          { value: "w01009", label: "溶解氧", standard: "≥5", isShow: true },
          { value: "w01014", label: "电导率", standard: "", isShow: true },
          { value: "w01003", label: "浊度", standard: "", isShow: true },
          { value: "w01019", label: "高锰酸盐", standard: "6", isShow: true },
          { value: "w21003", label: "氨氮", standard: "1", isShow: true },
          { value: "w21011", label: "总磷", standard: "0.2", isShow: true },
          { value: "w21001", label: "总氮", standard: "", isShow: true },
          { value: "w01016", label: "叶绿素", standard: "", isShow: true }
        ],
        tableHeadB: [
          //{ value: 'w01010', label: "水温", standard: "", isShow: true },
          { value: "w01001", label: "pH", standard: "6~9", isShow: true },
          //{ value: 'w01009', label: "溶解氧", standard: "≥5", isShow: true },
          //{ value: 'w01014', label: "电导率", standard: "", isShow: true },
          //{ value: 'w01003', label: "浊度", standard: "", isShow: true },
          { value: "w01018", label: "CODcr", standard: "", isShow: true },
          { value: "w21003", label: "氨氮", standard: "1", isShow: true },
          { value: "w21011", label: "总磷", standard: "0.2", isShow: true },
          { value: "w21001", label: "总氮", standard: "", isShow: true }
        ],
        tabActive: "a1",
        tableWraHei: "",
        currentPage: 1, //分页组件当前页
        pageSize: 10, //分页每页多少条数据
        totalRecords: 0, //总条数
        pageList: [10, 15, 20], //设置每页多少条
        // siteType:false,
        fieldList:[],
        fieldListB:['cityName','areaName','stationName','dataTime']
      };
    },

    methods: {
      //数据图表创建
      createTrendAnalysis() {
        let myChart = this.$echarts.init(
          document.getElementById("trend-analysis")
        );
        let option = {
          color: [
            "#8E42FF",
            "#00A3F5",
            "#1CAD8B",
            "#1EBD1E",
            "#C2A100",
            "#E68320",
            "#FF4242"
          ],
          title: {
            text: "变化趋势分析图",
            x: "center",
            y: 10
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["水温", "pH", "溶解氧", "电导率", "浊度"],
            top: 40
          },
          grid: {
            top: 80,
            left: 60,
            right: 60,
            bottom: 50,
            containLabel: true
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 0,
              end: 100
            },
            {
              type: "inside",
              realtime: true,
              start: 0,
              end: 100
            }
          ],
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#666"
              }
            },
            data: [
              "2019/02/07 5时",
              "2019/02/07 6时",
              "2019/02/07 7时",
              "2019/02/07 8时",
              "2019/02/07 9时",
              "2019/02/07 10时",
              "2019/02/07 11时"
            ]
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: "水温",
              type: "line",
              smooth: true,
              data: [20, 32, 11, 34, 20, 30, 21],
              markArea: {
                silent: true,
                itemStyle: {
                  color: "#d7e1eb",
                  opacity: 0.6,
                  borderWidth: 1,
                  borderType: "dashed"
                },
                label: {
                  color: "#000"
                },
                data: [
                  [
                    {
                      xAxis: "2019/02/07 6时",
                      name: "周质控不合格"
                    },
                    {
                      xAxis: "2019/02/07 7时"
                    }
                  ],
                  [
                    {
                      xAxis: "2019/02/07 8时",
                      name: "月质控-集成干预检查不合格"
                    },
                    {
                      xAxis: "2019/02/07 10时"
                    }
                  ]
                ]
              }
            },
            {
              name: "pH",
              type: "line",
              smooth: true,
              data: [22, 18, 19, 23, 29, 33, 31]
            },
            {
              name: "溶解氧",
              type: "line",
              smooth: true,
              data: [15, 23, 20, 15, 19, 33, 41]
            },
            {
              name: "电导率",
              type: "line",
              smooth: true,
              data: [32, 32, 30, 34, 30, 33, 32]
            },
            {
              name: "浊度",
              type: "line",
              smooth: true,
              data: [20, 32, 21, 34, 12, 13, 20]
            }
          ]
        };
        myChart.setOption(option);
      },
      selectChange(arr) {
        this.value = arr;
      },
      indexMethod(index) {
        return index + 1;
      },
      search(callback) {
        // this.fieldList = this.fieldListB;
        // for (let j in this.tableHead) {
        //   this.tableHead[j].isShow = false;
        // }
        // for (let i in this.value) {
        //   for (let j in this.tableHead) {
        //     if (this.value[i] === this.tableHead[j].value) {
        //       this.tableHead[j].isShow = true;
        //       // console.log(this.tableHead[j]);
        //       this.fieldList.push(this.tableHead[j].value);
        //       break;
        //     }
        //   }
        // }
        this.getFieldList();
        this.$nextTick(() => {
          this.searchHistoryData();
        });
      },
      //获取表格字段
      getFieldList(){
        this.fieldList = JSON.parse(JSON.stringify(this.fieldListB));
        for (let j in this.tableHead) {
          this.tableHead[j].isShow = false;
        }
        for (let i in this.value) {
          for (let j in this.tableHead) {
            if (this.value[i] === this.tableHead[j].value) {
              this.tableHead[j].isShow = true;
              // console.log(this.tableHead[j]);
              this.fieldList.push(this.tableHead[j].value);
              break;
            }
          }
        }
      },
      toggleTab(val) {
        let name = val.name;
        if (name === "a2") {
          setTimeout(() => {
            this.createTrendAnalysis();
          }, 300);
        }
      },
      //获取历史数据
      searchHistoryData() {
        console.log(this.fieldList);
        this.loading=true;
        this.$http
          .get("/Receiving/queryRowToColHourData", {
            params: {
              beginTime: this.dateRange[0].format("yyyy-MM-dd 00:00:00"),
              endTime: this.dateRange[1].format("yyyy-MM-dd 23:59:59"),
              //indexCodes: this.value.join(","),
              mn: this.stationId, //this.stationId
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
          })
          .then(res => {
            if (res.data.code === 0) {
              this.loading=false;
              this.tableData = res.data.content.dataList;
              this.totalRecords = res.data.content.totalRecords;
              console.log(res.data);
            }
          })
          .catch(error => {});
      },
      paginationChange(val) {
        //分页页码改变时执行
        this.currentPage = val;
        this.searchHistoryData();
      },
      paginationSizeChange(val) {
        //分页pageSize改变时执行
        this.pageSize = val;
        this.searchHistoryData();
      },
      //导出表格
      exportExcel(){
        let {table} = this.$refs;
        let tableBox = table.$el;
        console.log(tableBox);
        let header = tableBox.querySelector('.el-table__header');
        let title = this.stationName+'历史数据';
        let params = {
          headerProp:this.fieldList.join(','),
          startTime: this.dateRange[0].format('yyyy-MM-dd 00:00:00'),
          endTime: this.dateRange[1].format('yyyy-MM-dd 23:59:59'),
          indexCodes: this.value.join(','),
          stationCodes: this.stationId,
          pattern:'yyyy-MM-dd HH:mm:ss'
          // tableType:'FIVE_PARAMETER_DATA',
          // ifCurrentSection: true
        };
        exportTableData(header,title,'','1',"/Receiving/exports/dataReceiveExcel",params);
      }
    },
    mounted() {},
    created() {
      this.$store.commit("setShowlefttree", false);
      this.selectCheck = this.value;
      this.dateRange = [
        new Date(new Date().setDate(new Date().getDate() - 7)),
        new Date()
      ];
    },
    computed: {
      totalPage() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.totalRecords / this.pageSize);
        return number === 0 ? 1 : number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
          this.stationName = value[0].nodeName;
          if (value[0].stationType1 === "001") {
            // this.siteType = false;
            this.optionData = this.optionDataA;
            this.value = this.valueA;
            this.tableHead = this.tableHeadA;
            this.tableStationLabel = "断面名称";
          } else if (value[0].stationType1 === "002") {
            // this.siteType = true;
            this.tableStationLabel = "排污口名称";
            this.optionData = this.optionDataB;
            this.value = this.valueB;
            this.tableHead = this.tableHeadB;
          }

          this.getFieldList();

          this.$nextTick(() => {
            this.searchHistoryData();
          });
        }
      }
    }
  };
</script>

<style scoped lang="less">
.historypage {
  height: 100%;
}
</style>
